<!DOCTYPE script PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta charset="UTF-8">
<!---
	<script src="www.domain2.com/script.js"></script>
-->
<script type="text/javascript">
<!--
	//-->

	/////////JSONP: GET Request only
	function addScriptTag(src) {
		var script = document.createElement('script');
		script.setAttribute("type", "text/javascript");
		script.setAttribute("src", src);
		//script.src = src;
		document.getElementsByTagName('head')[0].appendChild(script);
		//document.body.appendChild(script);
	}

	window.onload = function() {
		//addScriptTag('http://h0.hpeswlab.net:8080/app1/WeatherServket?callback=callBackFunction');
		addScriptTag('http://h0.hpeswlab.net:8080/app1/getWeather.js?callback=callBackFunction');
	}

	function callBackFunction(data) {
		console.log('Your public IP address is' + data);
	}
	//////document.domain
	//1) has window object of other page
	//2) same level-2 domain
	//3) same protocol/port
	//document.domain = 'baidu.com';
	
	
	/////window.name
	//window.name will not change in same tab

	/////////CORS cross-origin resource shared
	//1)浏览器要支持CORS
	//2)Server should have header below
	//self.set_header('Access-Control-Allow-Origin', '*')
	//self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
	//self.set_header('Access-Control-Max-Age', 1000)
	//self.set_header('Access-Control-Allow-Headers', '*')
	//self.set_header('Content-type', 'application/json')
	
	//XMLHttpRequest HTML5
	// xhr.readyState：XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
	//* xhr.status：服务器返回的状态码，等于200表示一切正常。
	//* xhr.responseText：服务器返回的文本数据
	//* xhr.responseXML：服务器返回的XML格式的数据
	//* xhr.statusText：服务器返回的状态文本。
	//* xhr.timeout = 3000;
	//* xhr.ontimeout = function (event) { alert("请求超时！"); }
	//* xhr.open('POST', 'http://www.test.com:8000/login');
	var xhr = new XMLHttpRequest();
	var formData = new FormData();
	formData.append('tel', '18217767969');
	formData.append('psw', '111111');
	xhr.open('POST', 'http://h0.hpeswlab.net:8080/app1/WeatherServket');
	xhr.send(formData);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("Element1InMainWindow").innerHTML = xhr.responseText;
		} else {
			document.getElementById("Element1InMainWindow").innerHTML = xhr.statusText;
		}
	}

	/////IFrame	
	function clickNext() {
		document.getElementById("Element1InMainWindow").innerHTML = "xx"
	}
	function changeMainElementInIFrameInSameApp() {
		window.frames['contentFrameInSameApp'].contentWindow.document
				.getElementById("mainWindowMessageInSameApp").innerHTML = "maindinow";
		window.frames['contentFrameInSameApp'].contentWindow
				.handleElementInIFrameInSameApp("Next button is clicked on main window");
	}

	function changeMainElementInIFrameInSameDoamin() {
		window.frames['contentFrameInSameDomain'].contentWindow.document
				.getElementById("mainWindowMessageInSameDomain").innerHTML = "maindinow";
		window.frames['contentFrameInSameDomain'].contentWindow
				.handleElementInIFrameInSameDoamin("Next button is clicked on main window");
	}

	////////
	window.handleElementInMainWindow = function(msg) {
		document.getElementById("Element1InMainWindow").innerHTML = "Frame Message: "
				+ msg;
	}

	//////Post Message HTML5
	window.addEventListener('message',
			function(e) {
				console.log('Receive Message From Frame: ', e.data, e.source,
						e.origin);
			}, false);

	function sendPostMessageToFrameInSameDomain() {
		//		var popup = window.open('http://h0.feiye.com:8080/app2/frametest2.html', 'title');
		window.frames['contentFrameInSameDomain'].contentWindow.postMessage(
				'Main Window Hello World!', "*");
	}
</script>
<body>
	<!-- Same Origin -->
	<!-- 	<iframe id="contentFrameInSameApp" src="frametest2.html" width="200"
		height="200" seamless="seamless"> </iframe>

	<input type="button" value="changeElementInIFrameInSameApp"
		onclick="changeElementInIFrameInSameApp()" /> -->


	<!-- Same domain -->
	<iframe id="contentFrameInSameDomain"
		src="http://h0.feiye.com:8080/app2/frametest2.html" width="600"
		height="400" seamless="seamless"> </iframe>

	<input type="button" value="changeMainElementInIFrameInSameDoamin"
		onclick="changeMainElementInIFrameInSameDoamin()" />

	<input type="button" value="sendPostMessageToFrameInSameDomain"
		onclick="sendPostMessageToFrameInSameDomain()" />
	<div id="Element1InMainWindow"></div>

</body>
</html>